{{ 'section-blog-post.css' | asset_url | stylesheet_tag }}

<article class="join-list article-template" itemscope itemtype="http://schema.org/BlogPosting">

  <div class="all-list page-width">
    <div class="join-width">
      <div class="element-join">
          <a href="{{ section.settings.join_url }}" class="link animate-arrow">
            <span class="icon-wrap">{% render 'icon-bigJoin' %}</span>
            {%- if section.settings.back -%}
              {{ section.settings.back | escape }}
            {%- endif -%}
          </a>
      </div>
     </div>
  
    {%- for block in section.blocks -%}
      {%- case block.type -%}
        {%- when '@app' -%}
          <div class="page-width--narrow">
            {% render block %}
          </div>

        
  
          {%- when 'title'-%}
          <header class="page-width--narrow" {{ block.shopify_attributes }}>
            <div class="template-list">
             <h1 class="article-template__title" itemprop="headline">{{ article.title | escape }}</h1>
             {{ article.tags | join: ',' | replace: '_', ', '}}     
             {%- if block.settings.blog_show_date -%}
               <span class="circle-divider caption-with-letter-spacing" itemprop="dateCreated pubdate datePublished">{{ article.published_at | time_tag: format: 'date' }}</span>
             {%- endif -%}
             {%- if block.settings.blog_show_author -%}
               <span class="caption-with-letter-spacing" itemprop="author" itemscope itemtype="http://schema.org/Person">
                 <span itemprop="name">{{ article.author }}</span>
               </span>
             {%- endif -%}
             {%- if section.settings.buttom -%}
             <div class="ten-button">
              <a href="mailto:career@tenways.com" class="ten-hover ten-button1 button">
                <span>{{ section.settings.buttom | escape }}</span>
              </a>
             </div>    
             {%- endif -%}
            </div>
           </header>
  

          {%- when 'content'-%}
            <div class="article-template__content page-width--narrow rte" itemprop="articleBody" {{ block.shopify_attributes }}>
               <div class="job_width">
                {{ article.content }}
               </div>
            </div>

            
           {%- when 'featured_image'-%}
           <div class="img">
             {%- if article.image -%}
             <div class="bg">
               <div class="article-template__hero-container" {{ block.shopify_attributes }}>
                 <img
                     srcset="{% if article.image.width >= 350 %}{{ article.image | img_url: '350x' }} 350w,{% endif %}
                       {% if article.image.width >= 750 %}{{ article.image | img_url: '750x' }} 750w,{% endif %}
                       {% if article.image.width >= 1100 %}{{ article.image | img_url: '1100x' }} 1100w,{% endif %}
                       {% if article.image.width >= 1500 %}{{ article.image | img_url: '1500x' }} 1500w,{% endif %}
                       {% if article.image.width >= 2200 %}{{ article.image | img_url: '2200x' }} 2200w,{% endif %}
                       {% if article.image.width >= 3000 %}{{ article.image | img_url: '3000x' }} 3000w,{% endif %}"
                     sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 }}px, (min-width: 750px) calc(100vw - 10rem), 100vw"
                     src="{{ article.image | img_url: '1100x' }}"
                     loading="lazy"
                     width="{{ article.image.width }}"
                     height="{{ article.image.height }}"
                     alt="{{ article.image.alt | escape }}">
               </div>
             </div>
            
             {%- endif -%}
           </div>
  
          {%- when 'share' -%}
            <div class="article-template__social-sharing page-width page-width--narrow" {{ block.shopify_attributes }}>
              <share-button class="share-button" {{ block.shopify_attributes }}>
                <button class="share-button__button hidden">
                  {% render 'icon-share' %}
                  {{ block.settings.share_label | escape }}
                </button>
                <details>
                  <summary class="share-button__button">
                    {% render 'icon-share' %}
                    {{ block.settings.share_label | escape }}
                  </summary>
                  <div id="Article-share-{{ section.id }}" class="share-button__fallback motion-reduce">
                    <div class="field">
                      <span id="ShareMessage-{{ section.id }}" class="share-button__message hidden" role="status">
                      </span>
                      <input type="text"
                            class="field__input"
                            id="url"
                            value="{{ shop.url | append: article.url }}"
                            placeholder="{{ 'general.share.share_url' | t }}"
                            onclick="this.select();"
                            readonly
                      >
                      <label class="field__label" for="url">{{ 'general.share.share_url' | t }}</label>
                    </div>
                    <button class="share-button__close hidden no-js-hidden">
                      {% render 'icon-close' %}
                      <span class="visually-hidden">{{ 'general.share.close' | t }}</span>
                    </button>
                    <button class="share-button__copy no-js-hidden">
                      {% render 'icon-clipboard' %}
                      <span class="visually-hidden">{{ 'general.share.copy_to_clipboard' | t }}</span>
                    </button>
                  </div>
                </details>
              </share-button>
              <script src="{{ 'share.js' | asset_url }}" defer="defer"></script>
            </div>
      {%- endcase -%}
    {%- endfor -%}

    <div class="join-btn">
      {{ article.excerpt }}
      {%- if section.settings.buttom -%}
      <div class="ten-button">
       <a href="mailto:career@tenways.com" class="ten-hover ten-button1 button">
         <span>{{ section.settings.buttom | escape }}</span>
       </a>
      </div>    
      {%- endif -%}
    </div>
  
  
    {%- if blog.comments_enabled? -%}
      <div class="article-template__comment-wrapper background-secondary">
        <div id="comments" class="page-width page-width--narrow">
          {%- if article.comments_count > 0 -%}
            {%- assign anchorId = '#Comments-' | append: article.id -%}
  
            <h2 id="Comments-{{ article.id }}">{{ 'blogs.article.comments' | t: count: article.comments_count }}</h2>
            {% paginate article.comments by 5 %}
              <div class="article-template__comments">
                {%- if comment.status == 'pending' and comment.content -%}
                  <article id="{{ comment.id }}" class="article-template__comments-comment">
                    {{ comment.content }}
                    <footer class="right">
                      <span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span>
                    </footer>
                  </article>
                {%- endif -%}
  
                {%- for comment in article.comments -%}
                  <article id="{{ comment.id }}" class="article-template__comments-comment">
                    {{ comment.content }}
                    <footer class="right">
                      <span class="circle-divider caption-with-letter-spacing">{{ comment.author }}</span><span class="caption-with-letter-spacing">{{ comment.created_at | time_tag: format: 'date' }}</span>
                    </footer>
                  </article>
                {%- endfor -%}
                {% render 'pagination', paginate: paginate, anchor: anchorId %}
              </div>
            {% endpaginate %}
          {%- endif -%}
          {% form 'new_comment', article %}
            {%- liquid
              assign post_message = 'blogs.article.success'
              if blog.moderated? and comment.status == 'unapproved'
                assign post_message = 'blogs.article.success_moderated'
              endif
            -%}
            <h2>{{ 'blogs.article.comment_form_title' | t }}</h2>
            {%- if form.errors -%}
              <div class="form__message" role="alert">
                <h3 class="form-status caption-large" tabindex="-1" autofocus>
                  {% render 'icon-error' %} {{ 'templates.contact.form.error_heading' | t }}
                </h3>
              </div>
              <ul class="form-status-list caption-large">
                {%- for field in form.errors -%}
                  <li>
                    <a href="#CommentForm-{{ field }}" class="link">
                      {%- if form.errors.translated_fields[field] contains 'author' -%}
                        {{ 'blogs.article.name' | t }}
                      {%- elsif form.errors.translated_fields[field] contains 'body'-%}
                       {{ 'blogs.article.message' | t }}
                      {%- else -%}
                        {{ form.errors.translated_fields[field] }}
                      {%- endif -%}
                      {{ form.errors.messages[field] }}
                    </a>
                  </li>
                {%- endfor -%}
              </ul>
            {%- elsif form.posted_successfully? -%}
              <div class="form-status-list form__message" role="status">
                <h3 class="form-status" tabindex="-1" autofocus>{% render 'icon-success' %} {{ post_message | t }}</h3>
              </div>
            {%- endif -%}
  
            <div{% if blog.moderated? == false %} class="article-template__comments-fields"{% endif %}>
              <div class="article-template__comment-fields">
                <div class="field field--with-error">
                  <input
                    type="text"
                    name="comment[author]"
                    id="CommentForm-author"
                    class="field__input"
                    autocomplete="name"
                    value="{{ form.author }}"
                    aria-required="true"
                    {% if form.errors contains 'author' %}
                      aria-invalid="true"
                      aria-describedby="CommentForm-author-error"
                    {% endif %}
                    placeholder="{{ 'blogs.article.name' | t }}"
                  >
                  <label class="field__label" for="CommentForm-author">{{ 'blogs.article.name' | t }} <span aria-hidden="true">*</span></label>
                  {%- if form.errors contains 'author' -%}
                    <small id="CommentForm-author-error">
                      <span class="form__message">{% render 'icon-error' %}{{ 'blogs.article.name' | t }} {{ form.errors.messages['author'] }}.</span>
                    </small>
                  {%- endif -%}
                </div>
                <div class="field field--with-error">
                  <input
                    type="email"
                    name="comment[email]"
                    id="CommentForm-email"
                    autocomplete="email"
                    class="field__input"
                    value="{{ form.email }}"
                    autocorrect="off"
                    autocapitalize="off"
                    aria-required="true"
                    {% if form.errors contains 'email' %}
                      aria-invalid="true"
                      aria-describedby="CommentForm-email-error"
                    {% endif %}
                    placeholder="{{ 'blogs.article.email' | t }}"
                  >
                  <label class="field__label" for="CommentForm-email">{{ 'blogs.article.email' | t }} <span aria-hidden="true">*</span></label>
                  {%- if form.errors contains 'email' -%}
                    <small id="CommentForm-email-error">
                      <span class="form__message">{% render 'icon-error' %}{{ 'blogs.article.email' | t }} {{ form.errors.messages['email'] }}.</span>
                    </small>
                  {%- endif -%}
                </div>
              </div>
              <div class="field field--with-error">
                <textarea
                  rows="5"
                  name="comment[body]"
                  id="CommentForm-body"
                  class="text-area field__input"
                  aria-required="true"
                  {% if form.errors contains 'body' %}
                    aria-invalid="true"
                    aria-describedby="CommentForm-body-error"
                  {% endif %}
                  placeholder="{{ 'blogs.article.message' | t }}"
                >{{ form.body }}</textarea>
                  <label class="form__label field__label" for="CommentForm-body">{{ 'blogs.article.message' | t }} <span aria-hidden="true">*</span></label>
              </div>
              {%- if form.errors contains 'body' -%}
                <small id="CommentForm-body-error">
                  <span class="form__message">{% render 'icon-error' %}{{ 'blogs.article.message' | t }} {{ form.errors.messages['body'] }}.</span>
                </small>
              {%- endif -%}
            </div>
            {%- if blog.moderated? -%}
              <p class="article-template__comment-warning caption">{{ 'blogs.article.moderated' | t }}</p>
            {%- endif -%}
            <input type="submit" class="button" value="{{ 'blogs.article.post' | t }}">
          {% endform %}
        </div>
    </div>
    {%- endif -%}
  </div>

</article>

<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Article",
    "articleBody": {{ article.content | strip_html | json }},
    "mainEntityOfPage": {
      "@type": "WebPage",
      "@id": {{ shop.url | append: page.url | json }}
    },
    "headline": {{ article.title | json }},
    {% if article.excerpt != blank %}
      "description": {{ article.excerpt | strip_html | json }},
    {% endif %}
    {% if article.image %}
      {% assign image_size = article.image.width | append: 'x' %}
      "image": [
        {{ article | img_url: image_size | prepend: "https:" | json }}
      ],
    {% endif %}
    "datePublished": {{ article.published_at | date: '%Y-%m-%dT%H:%M:%SZ' | json }},
    "dateCreated": {{ article.created_at | date: '%Y-%m-%dT%H:%M:%SZ' | json }},
    "author": {
      "@type": "Person",
      "name": {{ article.author | json }}
    },
    "publisher": {
      "@type": "Organization",
      {% if settings.share_image %}
        {% assign image_size = settings.share_image.width | append: 'x' %}
        "logo": {
          "@type": "ImageObject",
          "height": {{ settings.share_image.height | json }},
          "url": {{ settings.share_image | img_url: image_size | prepend: "https:" | json }},
          "width": {{ settings.share_image.width | json }}
        },
      {% endif %}
      "name": {{ shop.name | json }}
    }
  }
  </script>


{% schema %}
{
  "name": "career article",
  "tag": "section",
  "settings": [
     {
        "type": "header",
        "content": "header"
     },
     {
      "type": "html",
      "id": "join_url",
      "default":"/pages/careers#all-join",
      "label": "Join url"
    },
     {
        "type": "text",
        "id": "back",
        "default":"Check All Job Openings",
        "label": "Back"
      },
      {
        "type": "text",
        "id": "buttom",
        "default":"Apply",
        "label": "Apply"
      }
  ],
  "blocks": [
    {
      "type": "@app"
    },
    {
      "type": "featured_image",
      "name": "t:sections.main-article.blocks.featured_image.name",
      "limit": 1,
      "settings": [
        {
          "type": "select",
          "id": "image_height",
          "options": [
            {
              "value": "adapt",
              "label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__1.label"
            },
            {
              "value": "small",
              "label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__2.label"
            },
            {
              "value": "medium",
              "label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__3.label"
            },
            {
              "value": "large",
              "label": "t:sections.main-article.blocks.featured_image.settings.image_height.options__4.label"
            }
          ],
          "default": "adapt",
          "label": "t:sections.main-article.blocks.featured_image.settings.image_height.label",
          "info": "t:sections.main-article.blocks.featured_image.settings.image_height.info"
        }
      ]
    },
    {
      "type": "title",
      "name": "t:sections.main-article.blocks.title.name",
      "limit": 1,
      "settings": [
        {
          "type": "checkbox",
          "id": "blog_show_date",
          "default": true,
          "label": "t:sections.main-article.blocks.title.settings.blog_show_date.label"
        },
        {
          "type": "checkbox",
          "id": "blog_show_author",
          "default": false,
          "label": "t:sections.main-article.blocks.title.settings.blog_show_author.label"
        }
      ]
    },
    {
      "type": "content",
      "name": "t:sections.main-article.blocks.content.name",
      "limit": 1
    },
    {
      "type": "share",
      "name": "t:sections.main-article.blocks.share.name",
      "limit": 2,
      "settings": [
        {
          "type": "text",
          "id": "share_label",
          "label": "t:sections.main-article.blocks.share.settings.text.label",
          "default": "Share"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-article.blocks.share.settings.featured_image_info.content"
        },
        {
          "type": "paragraph",
          "content": "t:sections.main-article.blocks.share.settings.title_info.content"
        }
      ]
    }
  ]
}
{% endschema %}
